<template>
    <div>
        <Form ref="form" :model="roleData" :label-width="90" style="height:30px">
            <Row :gutter="24" type="flex" justify="end">
                <Col v-bind="grid">
                    <FormItem label="角色名称：">
                        <Input v-model="roleData.roleName" placeholder="请输入角色名称" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="角色编码：" >
                        <Input v-model="roleData.roleCode" maxlength="20" placeholder="请输入角色编码" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem >
                        <Button type="default" icon="md-search" style="margin-left:5px" @click="handleSubmit"></Button>&nbsp;&nbsp;
                        <Button type="default" icon="md-refresh" @click="handleReset"></Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Table
            ref="table"
            :columns="tableColumns"
            :data="list"
            :loading="loading"
            :size="tableSize"
            class="ivu-mt"
            @on-select="handleSelect"
            @on-select-cancel="handleSelectCancel"
            @on-select-all="handleSelectAll"
            @on-select-all-cancel="handleClearSelect">
            <template slot-scope="{ row }" slot="name">
                {{ row.roleName }}
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center" style="height: 200px">
            <Page
                :total="pageNation.total"
                :page-size-opts="pageSizeOpts"
                :current.sync="pageNation.pageNumber"
                show-total
                show-sizer
                show-elevator
                :page-size="pageNation.pageSize"
                @on-change="handleChangePage"
                @on-page-size-change="handleChangePageSize"
            />
        </div>
    </div>
</template>
<script>

import {cloneDeep} from "lodash";
export default {
    data () {
        return {
            grid: {
                xl: 8,
                lg: 8,
                md: 12,
                sm: 24,
                xs: 24
            },
            roleData: {
                id: '',
                roleName: '',
                roleCode: '',
                roleDescrib: '',
                systemId: ''
            },
            columns: [
                {type: 'selection',minWidth: 60,align: 'center',show: true},
                {title: '角色名称',key: 'roleName',minWidth: 140,show: true},
                {title: '角色编码',key: 'roleCode',minWidth: 140,show: true},
                {title: '角色描述',key: 'roleDescrib',minWidth: 140,show: true},
                {title: '所属系统',key: 'systemId', slot: 'system',minWidth: 140,show: false},
            ],
            loading: false,
            list: [],
            selectedData: [],
            tableSize: 'default',
            roleInfo: null, // 当前选中的角色信息
            pageSizeOpts:[10,30,50,100],
            pageNation:{total:0,pageSize:10,pageNumber:1},
            selectedRoleData:[],
            roleObject:null,
        }
    },
    props: {
        selectedRoleIds:{
            default:()=>{
                return []
            }
        }
    },
    computed: {
        // 动态设置列
        tableColumns () {
            const columns = [...this.columns];
            return columns.filter(item => item.show);
        },
        offset () {
            return (this.current - 1) * this.limit;
        }
    },
    methods: {
        getData () {
            if (this.loading) return;
            this.loading = true;
            // 下面的 params 是获取的表单查询参数
            this.pageNation.total = 0;
            this.list = [];
            let condition = "";
            const params = this.roleData;
            if (params.roleName != null && params.roleName != "") {
                condition+="roleName like '%"+params.roleName+"%'";
            }

            if (params.roleCode != null && params.roleCode != "") {
                condition+="roleCode like '%"+params.roleCode+"%'";
            }
            this.$api.Role.queryByPage(this.pageNation.pageNumber,this.pageNation.pageSize,{condition}).then(res => {
                res.records.forEach(item => {
                    let ids = this.selectedRoleIds.filter(id => id == item.id);
                    if (ids.length > 0) {
                        item._checked = true;
                    } else {
                        item._checked = false;
                    }
                })
                this.selectedRoleData = cloneDeep(this.selectedRoleIds);
                this.list = cloneDeep(res.records);
                this.pageNation.total = res.recordCount;
                this.pageNation.pageNumber = res.pageNumber;
                this.pageNation.pageSize = res.pageSize;
            }).finally(()=>{
                this.loading = false;
            })
        },
        handleSubmit () {
            this.getData();
        },
        handleReset () {
            this.roleData={};
            this.getData();
        },
        // 刷新表格数据
        handleRefresh () {
            this.getData();
        },
        // 切换页码
        handleChangePage (page) {
            this.pageNation.pageNumber = page;
            this.getData();
        },
        // 切换每页条数
        handleChangePageSize (size) {
            this.pageNation.pageNumber = 1;
            this.pageNation.pageSize = size;
            this.getData();
        },
        // 选中一项，将数据添加至已选项中
        handleSelect (selection, row) {
            this.selectedRoleData.push(row.id);
        },
        // 取消选中一项，将取消的数据从已选项中删除
        handleSelectCancel (selection, row) {
            const index = this.selectedRoleData.findIndex(id => id === row.id);
            this.selectedRoleData.splice(index, 1);
        },
        // 当前页全选时，判断已选数据是否存在，不存在则添加
        handleSelectAll (selection) {
            selection.forEach(item => {
                if (this.selectedRoleData.findIndex(id =>id === item.id) < 0) {
                    this.selectedRoleData.push(item.id);
                }
            });
        },
        handleGetRoleIds(ids) {
            this.selectedRoleData.forEach(item => {
                if (ids.indexOf(item.id) == -1) {
                    ids.push(item.id);
                }
            });
            return ids;
        },
        // 清空所有已选项
        handleClearSelect () {
            this.selectedRoleData = [];
        }
    }
}
</script>
